//头部的点击事件
var wrapStopIndex = 0;
$("#wrap #club li").mouseenter(function() {
	$("#wrap #club li").css("backgroundColor", "transparent")
	$(this).css("backgroundColor", "black")
	$("#wrap #club li").eq(wrapStopIndex).css("backgroundColor", "black")
})
$("#wrap #club li").click(function() {
	$("#wrap #club li").css("backgroundColor", "transparent")
	$(this).css("backgroundColor", "black")
	wrapStopIndex = $(this).index()
})
//导航栏点击事件
var navStopIndex = 0
$("#nav a").mouseenter(function() {
	$("#nav a").css("backgroundColor", "transparent")
	$(this).css("backgroundColor", "#9B0909")
	$("#nav a").eq(navStopIndex).css("backgroundColor", "#9B0909")
})
$("#nav a").click(function() {
	$("#nav a").css("backgroundColor", "transparent")
	$(this).css("backgroundColor", "#9B0909")
	navStopIndex = $(this).index()
})
//轮播图
var mySwiper = new Swiper('.swiper-container', {
	direction: 'horizontal',
	loop: true, // 循环模式选项
	autoplay: true,
	pagination: {
		el: '.swiper-pagination',
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},

})

//解析json文件
var request
if(window.XMLHttpRequest) {
	request = new XMLHttpRequest
} else {
	request = new ActiveXObject("Microsoft.XMLHTTP")
}
request.open("GET", "json/网易.json", true)

request.onreadystatechange = function() {
	if(request.readyState == 4 && request.status == 200) {
		var arr = JSON.parse(request.responseText)
		getDate(arr)

	}
}
request.send()

function getDate(arr) {
	var songList = arr.song
	$(songList).each(function(i, v) {
		//		console.log(i,v)
		var li = document.createElement("li")
		$("#rocamand #bottom").append(li)
		$(li).css("position", "relative")
		var img = document.createElement("img")
		img.src = v.src
		li.append(img)
		var h6 = document.createElement("h6")
		li.append(h6)
		$(h6).css({
			"position": "absolute",
			"left": 0,
			"top": 110,
			"width": 140,
			"padding": "6px 0",
			"backgroundColor": "rgba(0,0,0,0.5)",
			"color": "#ccc",
			"font-size": 12,

		})
		var span1 = document.createElement("span")
		$(span1).addClass("iconfont icon-weibiaoti--")
		h6.append(span1)
		$(span1).css({
			"margin-left": 10,
			"margin-right": 5,
		})
		var span2 = document.createElement("span")
		$(span2).html(v.listernCount)
		h6.append(span2)
		var span3 = document.createElement("span")
		$(span3).addClass("iconfont icon-iconset0481")
		h6.append(span3)
		$(span3).css({
			"margin-left": 50,

		})
		var p = document.createElement("p")
		li.append(p)
		$(p).css({
			"font-size": 14,
		})
		$(p).html(v.title)
	})

	//右边
	//入驻歌手
	var settledSinger = arr.settledSinger
	//	console.log(settledSinger)
	$(settledSinger).each(function(i, v) {
		//		console.log(i,v)
		var li = document.createElement("li")
		$("#rocamand #right .settled").append(li)
		//左边图片
		var img = document.createElement("img")
		img.src = v.src
		$(img).css({
			width: 62,
			"float": "left"
		})
		li.append(img)
		var div = document.createElement("div")
		$(div).css({
			"float": "left",
			"margin-left": 10,
			"padding-top": 10,
			"height": 62
		})
		li.append(div)
		var h1 = document.createElement("h1")
		$(h1).html(v.singerName)
		$(h1).css({
			"font-size": 14,
			"color": "#333",
			"height": "20",
			"margin-bottom": 10,

		})
		div.append(h1)
		var p1 = document.createElement("p")
		$(p1).html(v.information)
		$(p1).css({
			"font-size": 12,
			"color": "#666",

		})
		div.append(p1)
	})
	//右边
	//热门主播
	var hAnchor = arr.hotAnchor
	//	console.log(settledSinger)
	$(hAnchor).each(function(i, v) {
		//		console.log(i,v)
		var li = document.createElement("li")
		$("#rocamand #right .anchor").append(li)
		//左边图片
		var img = document.createElement("img")
		img.src = v.src
		$(img).css({
			width: 40,
			"float": "left"
		})
		li.append(img)
		var div = document.createElement("div")
		$(div).css({
			"float": "left",
			"margin-left": 10,
//			"padding-top": 10,
			"height": 40,
			"width":150
		})
		li.append(div)
		var h1 = document.createElement("h1")
		$(h1).html(v.anchorName)
		$(h1).css({
			"font-size": 14,
			"color": "#333",
//			"height": "20",
//			"margin-bottom": 10,
			"white-space":"nowrap",
			"text-overflow":"ellipsis",
			"overflow":"hidden"

		})
		div.append(h1)
		var p1 = document.createElement("p")
		$(p1).html(v.information)
		$(p1).css({
			"font-size": 12,
			"color": "#666",
			"white-space":"nowrap",
			"text-overflow":"ellipsis",
			"overflow":"hidden"

		})
		div.append(p1)
	})
	//新碟上架
	var newCard = arr.new_card
	$(newCard).each(function(i, v) {
		//		console.log(i,v)
		var li = document.createElement("li")
		if(i < 5) {
			$("#rocamand #left .upload .outer .slider1").append(li)
		} else {
			$("#rocamand #left .upload .outer .slider2").append(li)
		}
		var img = document.createElement("img")
		img.src = v.card_src
		li.append(img)
		var h1 = document.createElement("h6")
		$(h1).html(v.card_name)
		$(h1).css({
			"font-size": 12,
			"color": "#000"
		})
		li.append(h1)
		var a = document.createElement("a")
		$(a).html(v.card_singer)
		$(a).css({
			"font-size": 12,
			"color": "#666"
		})
		li.append(a)

	})

	//飙升榜
	var hotSong = arr.soaring_list
	$(hotSong).each(function(i, v) {
		console.log(i, v)
		var li = document.createElement("li")
		$("#rocamand #left .list .hot").append(li)

		//左边数字
		var span1 = document.createElement("span")
		$(span1).html(v.song_rank)
		$(span1).css({
			"font-size": 16,
			"margin-left": 30
		})
		if(i < 3) {
			$(span1).css("color", "#ff4222")
		} else {
			$(span1).css("color", "#333333")
		}
		li.append(span1)
		//歌名

		var a1 = document.createElement("a")
		$(a1).html(v.song_name)
		$(a1).css({
			"margin-left": 10,
			"font-size": 12,
		})
		$(li).append(a1)

		//三个小按钮
		var a2 = document.createElement("a")
		$(a2).addClass("iconfont icon-fenxiang")
		$(a2).css({
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a2)

		var a3 = document.createElement("a")
		$(a3).addClass("iconfont icon-tianjia")
		$(a3).css({
			"margin": "0 5px",
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a3)

		var a4 = document.createElement("a")
		$(a4).addClass("iconfont icon-bofang")
		$(a4).css({
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a4)

	})
	var li = document.createElement("li")
	$("#rocamand #left .list .hot").append(li)
	$(li).html("查看更多>")
	$(li).css({
		"font-size": 12,
		"text-align": "right"
	})
	//新歌榜
	var newSong = arr.newsong_list
	$(newSong).each(function(i, v) {
		console.log(i, v)
		var li = document.createElement("li")
		$("#rocamand #left .list .new").append(li)

		//左边数字
		var span1 = document.createElement("span")
		$(span1).html(v.song_rank)
		$(span1).css({
			"font-size": 16,
			"margin-left": 30
		})
		if(i < 3) {
			$(span1).css("color", "#ff4222")
		} else {
			$(span1).css("color", "#333333")
		}
		li.append(span1)
		//歌名

		var a1 = document.createElement("a")
		$(a1).html(v.song_name)
		$(a1).css({
			"margin-left": 10,
			"font-size": 12,
		})
		$(li).append(a1)

		//三个小按钮
		var a2 = document.createElement("a")
		$(a2).addClass("iconfont icon-fenxiang")
		$(a2).css({
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a2)

		var a3 = document.createElement("a")
		$(a3).addClass("iconfont icon-tianjia")
		$(a3).css({
			"margin": "0 5px",
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a3)

		var a4 = document.createElement("a")
		$(a4).addClass("iconfont icon-bofang")
		$(a4).css({
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a4)

	})
	var li = document.createElement("li")
	$("#rocamand #left .list .new").append(li)
	$(li).html("查看更多>")
	$(li).css({
		"font-size": 12,
		"text-align": "right"
	})
	//原创榜
	var originalSong = arr.orginal_list
	$(originalSong).each(function(i, v) {
		console.log(i, v)
		var li = document.createElement("li")
		$("#rocamand #left .list .original").append(li)

		//左边数字
		var span1 = document.createElement("span")
		$(span1).html(v.song_rank)
		$(span1).css({
			"font-size": 16,
			"margin-left": 30
		})
		if(i < 3) {
			$(span1).css("color", "#ff4222")
		} else {
			$(span1).css("color", "#333333")
		}
		li.append(span1)
		//歌名

		var a1 = document.createElement("a")
		$(a1).html(v.song_name)
		$(a1).css({
			"margin-left": 10,
			"font-size": 12,
		})
		$(li).append(a1)

		//三个小按钮
		var a2 = document.createElement("a")
		$(a2).addClass("iconfont icon-fenxiang")
		$(a2).css({
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a2)

		var a3 = document.createElement("a")
		$(a3).addClass("iconfont icon-tianjia")
		$(a3).css({
			"margin": "0 5px",
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a3)

		var a4 = document.createElement("a")
		$(a4).addClass("iconfont icon-bofang")
		$(a4).css({
			"float": "right",
			"font-size": 16,
			"font-weight": 700,
			"color": "#999999",
			"margin-right": 5,
			"opacity": 0
		})
		$(li).append(a4)

	})
	var li = document.createElement("li")
	$("#rocamand #left .list .original").append(li)
	$(li).html("查看更多>")
	$(li).css({
		"font-size": 12,
		"text-align": "right"
	})
	
	//飙升版点击出现
	$("#rocamand #left .list .hot li").hover(
		function() {
			//当前触摸的li里的div
			//			console.log($("li div").eq($(this).index()))
			//该div下的所有.iconfont子标签
			$("#rocamand #left .list .hot li").eq($(this).index()-1).find(".iconfont").animate({
				"opacity": 1,
			}, 400, "linear")
		},
		function() {
			$("#rocamand #left .list .hot li").eq($(this).index()-1).find(".iconfont").animate({
				"opacity": 0,
			}, 400, "linear")
		}
	)
	//新歌榜点击出现
	$("#rocamand #left .list .new li").hover(
		function() {
			//当前触摸的li里的div
			//			console.log($("li div").eq($(this).index()))
			//该div下的所有.iconfont子标签
			$("#rocamand #left .list .new li").eq($(this).index()-1).find(".iconfont").animate({
				"opacity": 1,
			}, 400, "linear")
		},
		function() {
			$("#rocamand #left .list .new li").eq($(this).index()-1).find(".iconfont").animate({
				"opacity": 0,
			}, 400, "linear")
		}
	)
	//原创榜点击出现
	$("#rocamand #left .list .original li").hover(
		function() {
			//当前触摸的li里的div
			//			console.log($("li div").eq($(this).index()))
			//该div下的所有.iconfont子标签
			$("#rocamand #left .original li").eq($(this).index()-1).find(".iconfont").animate({
				"opacity": 1,
			}, 400, "linear")
		},
		function() {
			$("#rocamand #left .list .original li").eq($(this).index()-1).find(".iconfont").animate({
				"opacity": 0,
			}, 400, "linear")
		}
	)
	

}